<template>
  <div class="cms-container">
    <!-- 头部公共的 Header 区域 -->
    <mt-header fixed title="黑马程序员 · Nuxt">
      <span v-show="isShowBack" slot="left" @click="goBack()">
        <mt-button icon="back">返回</mt-button>
      </span>
    </mt-header>

    <!-- 在 layouts 中，通过 next 组件为 ssr 页面占位 -->
    <!-- keep-alive 可以一定程度上缓存页面 -->
    <nuxt keep-alive />

    <!-- 底部公共的 TabBar 区域 -->
    <mt-tabbar :value="activeTabName" :fixed="true">
      <mt-tab-item id="/">
        <!-- 在 mt-tab-item 内部，通过 div 嵌套图标和文本，同时为 div 绑定点击事件处理函数，从而切换显示不同的 pages 页面 -->
        <div class="tab-item" @click="navToTab('/')">
          <i slot="icon" class="cubeic-home"></i>
          <span>首页</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="/search">
        <div class="tab-item" @click="navToTab('/search')">
          <i slot="icon" class="cubeic-search"></i>
          <span>搜索</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="/cart">
        <div class="tab-item" @click="navToTab('/cart')">
          <i slot="icon" class="cubeic-mall">
            <i class="badge">{{ allcount }}</i>
          </i>
          <span>购物车</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="/user">
        <div class="tab-item" @click="navToTab('/user')">
          <i slot="icon" class="cubeic-person"></i>
          <span>我的</span>
        </div>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'

export default {
  data() {
    return {
      title: '黑马程序员·CMS',
      isShowBack: false
    }
  },
  computed: {
    ...mapState(['activeTabName']),
    ...mapGetters({
      // 在映射vuex模块中数据的时候，必须进行重命名
      allcount: 'carts/allGoodsCount'
    })
  },
  watch: {
    // 监听路由地址的改变
    '$route.path': function(newVal) {
      // 判断是否展示后退按钮
      if (newVal === '/') {
        this.isShowBack = false
      } else {
        this.isShowBack = true
      }

      // 所有 tab 栏对应的页面路径
      const tabPath = ['/', '/search', '/cart', '/user']
      // 判断当前路径是否属于 tab 栏
      if (tabPath.indexOf(newVal) !== -1) {
        // 如果是，则更新 tab 栏的高亮效果
        this.changeActiveTabName(newVal)
      }
    }
  },
  beforeMount() {
    // 从 localStorage 读取默认高亮的 tab 栏
    const activeName = window.localStorage.getItem('activeTabName') || '/'
    this.changeActiveTabName(activeName)
    // 从 localStorage 读取默认的购物车列表
    const cart = JSON.parse(window.localStorage.getItem('cart') || '[]')
    this.initCart(cart)

    if (this.$route.path === '/') {
      this.isShowBack = false
    } else {
      this.isShowBack = true
    }
  },
  methods: {
    ...mapMutations({
      changeActiveTabName: 'changeActiveTabName',
      initCart: 'carts/init'
    }),
    // 导航到指定的 tab 页面
    navToTab(path) {
      this.$router.push(path)
      this.changeActiveTabName(path)
    },
    // 后退
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
.cms-container {
  padding-top: 40px;
  padding-bottom: 50px;
}
.mint-tabbar {
  height: 50px;
}
.mint-tabbar i {
  font-size: 25px;
}
.testBox {
  height: 500px;
  background-color: red;
}

.tab-item {
  display: flex;
  flex-direction: column;
}

.tab-item span {
  margin-top: 3px;
}

.cubeic-mall {
  position: relative;
}

.badge {
  position: absolute;
  left: 50%;
  transform: translateX(30%);
  top: -4px;
  background-color: #ff4444;
  color: white;
  font-size: 10px !important;
  font-style: normal;
  line-height: 14px;
  min-width: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 16px;
}
</style>
